<template>
  <div class="fold-expand" :style="styles" @click="setMenuCollapsed">
    <MIcon v-show="collapsed" name="icon-expand"></MIcon>
    <MIcon v-show="!collapsed" name="icon-fold"></MIcon>
    <span v-show="!collapsed" style="font-size: 16px">收起侧边栏</span>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useAppStore } from '@/store'

defineOptions({
  name: 'LayoutCpnMenuCollapsed'
})

const appStore = useAppStore()
const collapsed = computed(() => appStore.appSetting.menu.collapsed)
const styles = computed(() =>
  collapsed.value
    ? {
        width: '49px',
        'border-top-right-radius': '5px',
        'border-bottom-right-radius': '5px'
      }
    : {
        width: '256px'
      }
)

const setMenuCollapsed = () => {
  appStore.setAppSetting({
    menu: {
      collapsed: !collapsed.value
    }
  })
}
</script>

<style lang="scss" scoped>
.fold-expand {
  @include m-menu-theme(true);
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 9;
  height: 45px;
  font-size: 25px;
  box-shadow: 0px -3px 5px rgba(0, 0, 0, 0.09);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
